<template>
  <div id="pop">
    <div class="module-dialog-layer" style="display: block"></div>
    <div
      @click="handleClose"
      class="module-dialog clear module-dialog-address module-dialog-show"
    >
      <div class="dialog-panel" @click.stop>
        <div class="topbar">
          <div class="dialog-tit clear">
            <h4 class="js-dialog-title">管理收货地址</h4>
          </div>
          <span class="dialog-close" @click="handleClose">x</span>
        </div>
        <div class="dialog-con js-dialog-container">
          <div class="animate-layer">
            <div class="dialog-inner js-address-add">
              <div class="save-address-box">
                <div class="address-form">
                  <div class="module-form-row">
                    <div class="form-item-v3">
                      <input
                        type="text"
                        class="js-verify"
                        placeholder="收货人姓名"
                        v-model="newAddress.username"
                      />
                      <div class="verify-error"></div>
                    </div>
                  </div>
                  <div class="module-form-row">
                    <div class="form-item-v3">
                      <input
                        type="text"
                        class="js-verify"
                        placeholder="手机号"
                        v-model="newAddress.phone"
                      />
                      <div class="verify-error"></div>
                    </div>
                  </div>
                  <div class="module-form-row clear">
                    <div
                      class="form-item-v3 area-code-w fn-left form-valid-item"
                    >
                      <input
                        type="text"
                        class="js-verify js-address-area-code"
                        placeholder="区号（可选）"
                        v-model="newAddress.tel[0]"
                      />
                      <div class="verify-error"></div>
                    </div>
                    <div
                      class="form-item-v3 telephone-w fn-right form-valid-item"
                    >
                      <input
                        type="text"
                        class="js-verify js-address-telephone"
                        placeholder="固定电话（可选）"
                        v-model="newAddress.tel[1]"
                      />
                      <div class="verify-error"></div>
                    </div>
                  </div>
                  <div class="module-form-row clear">
                    <div class="form-item-v3 select-item province-wrapper">
                      <select
                        name="province_code"
                        class="province select-province js-form-province js-verify"
                        v-model="lv1"
                      >
                        <option value="-1">请选择省份</option>
                        <option
                          v-for="(item, index) in province"
                          :key="index"
                          :value="index"
                        >
                          {{item.Name}}
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="module-form-row clear">
                    <div
                      class="form-item-v3 select-item city-wrapper fn-left form-focus-item"
                    >
                      <select v-model="lv2" class="city select-city js-form-city js-verify">
                        <option value="-1">请选择城市</option>
                        <option
                          v-for="(item, index) in city"
                          :key="index"
                          :value="index"
                        >
                          {{item.Name}}
                        </option>
                      </select>
                    </div>
                    <div
                      class="form-item-v3 select-item district-wrapper fn-right form-focus-item"
                    >
                      <select v-model="lv3" class="city select-city js-form-city js-verify">
                        <option value="-1">请选择区县</option>
                        <option
                          v-for="(item, index) in region"
                          :key="index"
                          :value="index"
                        >
                          {{item.Name}}
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="module-form-row">
                    <div class="form-item-v3">
                      <input
                        type="text"
                        class="js-verify"
                        placeholder="详细地址，如街道名称，楼层，门牌号码等"
                        v-model="newAddress.address"
                      />
                      <div class="verify-error"></div>
                    </div>
                  </div>
                  <div class="module-form-row fn-clear">
                    <input type="checkbox" class="hide" />
                    <span class="blue-checkbox"></span>设为默认
                  </div>
                  <div
                    class="dialog-blue-btn big-main-btn js-verify-address"
                    :class="{'disabled-btn':!btnState}"
                    @click="handleAdd"
                  >
                    <a>保存</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCitys } from "../api/user.js";
export default {
  data() {
    return {
      province: [],
      lv1:-1,   //标志选中的省份下标
      lv2:-1, //标志选中的城市下标
      lv3:-1,  //标志选中的区县下标
      newAddress:{
        username:'张三丰',
        phone:'13955556666',
        tel:['023','12345678'],
        address:'桥头老地方',
        isdefault:true
      }
    };
  },
  computed: {
    city() { //根据选中的省份，得到对应的城市列表
      let {province,lv1} = this
      return lv1==-1?[]:province[lv1].City
    },
    region(){ //根据选中的城市，得到对应的区县列表
      let {city,lv2} = this
      return lv2==-1?[]:city[lv2].Region
    },
    btnState(){ //根据用户录入的数据，动态判断保存按钮状态，false代表禁用
      let {lv1,lv2} = this
      let {username,phone,address} = this.newAddress
      return lv1!=-1 && lv2!=-1 && username!='' && phone!=''&& address!=''
    }
  },
  watch:{
    lv1(){
      this.lv2 = this.lv3 = -1
    },
    lv2(){
      this.lv3 = -1
    }
  },
  methods: {
    handleClose() {
      this.$emit("on-close");
    },
    handleAdd(){ //新增地址

      // 整合数据包
      let {newAddress,lv1,lv2,lv3,province,city,region} = this
      newAddress.loc = [ 
        {name:province[lv1].Name,idx:lv1},
        {name:city[lv2].Name,idx:lv2},
        {name:lv3==-1?'':region[lv3].Name,idx:lv3},
      ]
      // 触发mutation
      // this.$store.commit('address/addressAddMut',newAddress)
      this.$store.dispatch('address/addressAddAct',newAddress)
      // 关闭弹窗
      this.handleClose()
    }
  },
  created() {
    getCitys().then((res) => {
      // console.log(res);
      this.province = res.data;
    });
  },
};
</script>

<style src="../assets/css/address-pop.css" scoped></style>
<style lang="less" scoped></style>
